Jquery 是一個Javascript的函示庫,基本上不用太多介紹,它變成Web Dveloper必備的技能之一
套件多到每天逛也逛不完,今天要介紹最近工作有使用到的輪播/跑馬燈套件
目前網頁設計多半不會塞滿了文字,所以圖片輪播在網頁上還蠻常見的。
使用Jquery Cycle套件只要幾行程式碼就可以完成此功能
http://jquery.malsup.com/cycle/
官網已經有很多Demo的範例,這邊把一些比較會用到的功能做個紀錄:
製作最陽春的輪播
Step 1 加入圖片檔,並塞至一個div標籤裡,內容可以換成Span or input 標籤當成文字跑馬燈
<div id="slideshow">
<img src="img1.png" />
<img src="img2.png" />
<img src="img3.png" />
</div>
Step 2 調整CSS
<style type="text/css">
#slideshow
{
top: 0px;
left: 0px;
float: left;
width: 200px;
height: 10px;
z-index: -5;
}
</style>
Step 3 加入Script
<!-- <script src="../jquery.cycle.lite.js" type="text/javascript"></script>-->
<script src="../jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#slideshow').cycle({
fx: "scrollHorz"
});
});
</script>
是的,就是那麼容易,輪播功能已經完成了,
fx參數是切換的效果,如果不用太多炫麗的效果,
只要載入lite檔就夠了畢竟cycle.all.js檔會比較肥大,
切換效果參數的設定可以至此頁面參考,
加入分頁切換功能
圖片輪播完成了,但圖片很多總不能叫使用者傻傻等吧!
也是只要加入個div,設定幾個餐數就可以完成!
<div id="slideshow">
<div id="nav1"></div>
<img src="img1.png" />
<img src="img2.png" />
<img src="img3.png" />
</div>
$(document).ready(function () {
$('#slideshow').cycle({
fx: "scrollHorz",
speed: 'fast',
timeout: 3000,
pager: '#nav',
slideexpr: 'img'
});
});
如果要搭配Ajax去抓資料
如要使用Ajax,去做局部更新的效果
此套件也有很多事件可以控制:
$(document).ready(function () {
$('#slideshow').cycle({
fx: "scrollHorz",
speed: 'fast',
timeout: 3000,
pager: '#nav',
slideexpr: 'img',
before: function (currslideelement, nextslideelement, options, forwardflag) {
//抓到目前圖片的index
$('#txt_index').val($(nextslideelement).index());
// do something .....
}
});
});
以上,還有很多功能可以去官網玩看看!!